<html>
    <head>
        <title>浏览器的逐帧动画机制</title>
    </head>
    <body>
        <script>
            // 浏览器的逐帧动画机制 :是什么？ 为什么? 怎么用？

                     // 一、是什么？
                                /*
                                    浏览器的逐帧动画机制是一种通过 "浏览器的渲染流程" 和 "requestAnimatinoFrame Api " 实现的"动画技术"。
                                    
                                    它允许开发者在"浏览器的渲染周期"内，逐帧更新动画状态，从而实现流畅的动画效果。

                                       1、核心概念：
                                                逐帧动画通过在浏览器的每个"渲染帧"中更新动画状态，确保动画与屏幕刷新率同步，避免卡顿和抖动。

                                       2、requestAnimationFrome:
                                                这是实现逐帧动画的关键API。它告诉浏览器:"希望执行一个动画，并要求浏览器在下次重绘之前调用指定的回调函数"
                                */


                     // 二、为什么？
                                /*
                                    逐帧动画机制相比传统的 setTimeout 或者 setInterval 方法实现的动画，具有显著的优势：

                                        1、与屏幕刷新率同步：
                                                requestAnimationFrame会根据屏幕的刷新率(通常是60Hz)自动调整动画的帧率，避免了因帧率不匹配导致的动画卡顿。

                                        2、节能优化：
                                                当页面未激活时(如被隐藏或被最小化)， requestAnimationFrame 会自动暂停动画，节省CPU资源。

                                        3、减少DOM操作：
                                                将动画相关的DOM操作集中在一个渲染帧中，减少不必要的重绘和重排。
                                */


                    // 三、怎么用？
                                // 使用 requestAnimatinFrame 实现逐帧动画的基本步骤如下：
                                        /*
                                            <!DOCTYPE html>
                                            <html lang="en">
                                            <head>
                                                <meta charset="UTF-8">
                                                <title>逐帧动画示例</title>
                                                <style>
                                                    #box {
                                                        width: 50px;
                                                        height: 50px;
                                                        background-color: red;
                                                        position: absolute;
                                                        top: 0;
                                                        left: 0;
                                                    }
                                                </style>
                                            </head>
                                            <body>
                                                <div id="box"></div>
                                                <script>
                                                    const box = document.getElementById('box');
                                                    let position = 0;

                                                    function animate() {
                                                        position += 1; // 每帧移动1像素
                                                        box.style.left = position + 'px'; // 更新位置

                                                        if (position < 200) {
                                                            requestAnimationFrame(animate); // 请求下一帧
                                                        }
                                                    }

                                                    // 开始动画
                                                    requestAnimationFrame(animate);
                                                <-/script>
                                            </body>
                                            </html>
                                        */

                                       /*
                                            步骤解析：

                                                1、初始化：       设置动画元素的初始状态.
                                                2、定义动画函数： 在动画函数中更新动画状态(如位置，样式等)
                                                3、请求下一帧：   通过 requestAnimatinFrame 递归调用动画函数，确保在每个渲染帧中更新。
                                                4、结束条件：     根据需要设置带个话的结束条件。
                                       */



        </script>
    </body>
</html>